import React from 'react'
import {Pagination} from 'antd';
import 'antd/dist/antd.css';
import data from "../../../data/showData/Data"
import Card from './card'
import SearchText from './search'
import './search/index.css'

/**
 * @author: RenLishisan
 * @description: 该组件用于渲染card和sear组件并且提供相关的数据
 * @param: up,data,page.value,inputValueName, inputValuePrice, inputValueStock, inputValueNo
 * @return: item
 * @time: 2020/10/23
 **/
const pageSize = 3;//一页展示3条数据
class ShowPublic extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],     //页面数据
            currentPage: 1,      //当前页码
        };
    };

    /**
     * @author: RenLishisan
     * @description: 通过onChange调用该方法并且将旧页码更改成新页码
     * @param: page
     * @return:
     * @time: 2020/10/27
     **/
    page = (page) => {
        this.setState({
            currentPage: page
        });
    };

    /**
     * @author: RenLishisan
     * @description: 将源数据放入页面初始化
     * @param: data
     * @time: 2020/10/27
     **/
    componentDidMount() {
        this.setState({
            dataSource: data
        });
    };

    /**
     * @author: RenLishisan
     * @description: 分页器运算和搜索运算
     * @param: value,currentPage, dataSource
     * @return: pageData
     * @time: 2020/10/27
     **/
    pageData = (value) => {
        console.log('pageData执行了....')
        console.log('当前的Value:', value)
        const {currentPage, dataSource} = this.state;
        return value === undefined
            ? dataSource.slice((currentPage - 1) * pageSize, currentPage * pageSize)
            : data.filter(array => array.name.match(value)).slice((currentPage - 1) * pageSize, currentPage * pageSize);
    };
    /**
     * @author: RenLishisan
     * @description: 更新搜索到dataSource
     * @param: value
     * @return: dataSource
     * @time: 2020/10/27
     **/
    upDataSource = (value) => {
        console.log('开始setState...')
        console.log('未跟新的DataSource：', this.state.dataSource)
        console.log('获取到的新pageData：', this.pageData(value))
        this.setState({
            dataSource: this.pageData(value),
        });
        console.log('更改过后的DataSource：', this.state.dataSource)
    };
    /**
     * @author: RenLishisan
     * @description: 更新商品修改过后的数据
     * @param: inputValueName, inputValuePrice, inputValueStock, inputValueNo
     * @return: dataSource
     * @time: 2020/10/27
     **/
    updateInput = (inputValueName, inputValuePrice, inputValueStock, inputValueNo) => {
        const {dataSource} = this.state;
        dataSource[inputValueNo - 1].name = inputValueName;
        dataSource[inputValueNo - 1].price = inputValuePrice;
        dataSource[inputValueNo - 1].stock = inputValueStock;
        this.setState({dataSource});
    };

    render() {
        const {dataSource} = this.state;
        return (<div className="centre">
                {/*搜索组件*/}
                <div className='search'>
                    <SearchText upDataSource={this.upDataSource} productListUp={this.pageData}/>
                </div>

                {//遍历数组展示
                    this.pageData().map(item => <Card key={item.id} updateInput={this.updateInput} item={item}/>
                    )}
                {/*引用的AntD分页组件*/}
                <Pagination
                    className="show-pagination"
                    size="small"
                    onChange={this.page}
                    pageSize={pageSize}
                    total={dataSource.length}
                    showQuickJumper
                />
            </div>
        )
    }
}

export default ShowPublic